import * as React from 'react';
import {
  View,
  Text,
  Image,
  ImageBackground,
  TouchableHighlight,
} from 'react-native';
import BasePageV5 from 'react-native-cdy-baseui/components/BasePageV5';
import ImageConstants from '../resources/ImageConstants';
import AutoSizingImage from 'react-native-cdy-baseui/components/AutoSizingImage';
import Row from 'react-native-cdy-baseui/components/Row';
import ColorButton from 'react-native-cdy-baseui/components/ColorButton';
import {responsiveNumber} from 'react-native-responsive-number/src/index';
class DoorPage extends BasePageV5 {
  constructor(props) {
    super(props);
    this.state = {};
  }

  renderContent() {
    return (
      <View
        style={{
          flex: 1,
          alignItems: 'stretch',
          backgroundColor: 'white',
        }}>
        <Image
          source={ImageConstants.IMG_BCG}
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
          }}
          resizeMode="cover"
        />
        <Image
          source={ImageConstants.IMG_SHADOW}
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
          }}
        />
        <View style={{width: '90%', marginTop: '10%', marginHorizontal: '5%'}}>
          <Image
            source={ImageConstants.IMG_CHECK_BCG_SHADOW}
            resizeMode="contain"
            style={{
              position: 'absolute',
              top: '7%',
              left: '2%',
              width: '100%',
              height: '100%',
            }}
          />
          <AutoSizingImage
            source={ImageConstants.IMG_CHECK_BCG}
            resizeMode="contain"
            style={{
              width: '100%',
              alignItems: 'stretch',
            }}>
            <Text
              style={{
                alignSelf: 'center',
                fontSize: 25,
                fontWeight: 'bold',
                marginTop: 10,
                color: '#3BB9BA',
              }}>
              南205
            </Text>
            <Row>
              <View style={{flex: 1, marginLeft: '5%'}}>
                <TouchableHighlight>
                  <AutoSizingImage
                    width="90%"
                    style={{
                      alignItems: 'center',
                      justifyContent: 'center',
                      marginTop: '15%',
                    }}
                    resizeMode="contain"
                    source={ImageConstants.IMG_GRADIENT_BUTTON_BCG}>
                    <Text
                      style={{
                        color: 'white',
                        fontSize: responsiveNumber(8),
                        marginLeft: -20,
                        fontWeight: 'bold',
                      }}>
                      当前课程
                    </Text>
                  </AutoSizingImage>
                </TouchableHighlight>
                <View style={{flex: 1, justifyContent: 'center'}}>
                  <Row style={{height: 70, marginHorizontal: '10%'}}>
                    <Text
                      style={{fontSize: responsiveNumber(7), color: '#555'}}>
                      上课时间：
                    </Text>
                    <Text
                      style={{fontSize: responsiveNumber(7), color: '#555'}}>
                      10:30-11:00
                    </Text>
                  </Row>
                  <Row style={{height: 70, marginHorizontal: '10%'}}>
                    <Text
                      style={{fontSize: responsiveNumber(7), color: '#555'}}>
                      课程名称：
                    </Text>
                    <Text
                      style={{fontSize: responsiveNumber(7), color: '#555'}}>
                      XXX
                    </Text>
                  </Row>
                  <Row style={{height: 70, marginHorizontal: '10%'}}>
                    <Text
                      style={{fontSize: responsiveNumber(7), color: '#555'}}>
                      任课老师：
                    </Text>
                    <Text
                      style={{fontSize: responsiveNumber(7), color: '#555'}}>
                      XXX
                    </Text>
                  </Row>
                </View>
              </View>
              <AutoSizingImage
                source={ImageConstants.IMG_VERTICAL_LINE}
                width={2}
                style={{marginTop: '5%'}}
              />
              <View style={{flex: 2}} />
            </Row>
            <AutoSizingImage
              source={ImageConstants.IMG_HORIZONTAL_LINE}
              width={'95%'}
              style={{marginLeft: '5%'}}
            />
            <Row style={{marginHorizontal: '5%'}}>
              {['应到', '实到', '迟到', '未到'].map(value => {
                return (
                  <View style={{alignItems: 'center', flex: 1}}>
                    <Text
                      style={{
                        fontSize: responsiveNumber(8),
                        fontWeight: 'bold',
                        marginTop: 10,
                        color: '#3BB9BA',
                        marginBottom: 10,
                      }}>
                      {value}
                    </Text>
                    <ColorButton
                      backgroundColor="#6FC5C3"
                      height={responsiveNumber(10)}
                      containerStyle={{paddingHorizontal: 30}}
                      fontSize={responsiveNumber(8)}
                      color={'white'}>
                      50人
                    </ColorButton>
                  </View>
                );
              })}
              <View style={{flex: 3, marginLeft: '5%', marginTop: 15}}>
                <Text style={{color: '#888', fontSize: responsiveNumber(6)}}>
                  考勤通知
                </Text>
                <Text style={{color: '#888', fontSize: responsiveNumber(4)}}>
                  1、点击智慧班级考勤按钮，进入课堂考勤页面；{'\n'}
                  2、将校园卡对准刷卡区域刷卡，或将面部对准入验识别区域，{'\n'}
                  考勤成功系统会显示学号、姓名、签到成功提示；
                  {'\n'}
                  3、不得给你他人代刷； {'\n'}4、当前课程考勤成功，秩序
                </Text>
              </View>
            </Row>
          </AutoSizingImage>
        </View>
        <AutoSizingImage
          source={ImageConstants.IMG_BOTTOM_TEXT}
          style={{alignSelf: 'center', width: '60%', marginTop: '2%'}}
          resizeMode={'contain'}
        />
      </View>
    );
  }
}

export default DoorPage;
